<!--
 * @Author: Bennty
 * @Date: 2024-11-22 09:51:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-28 09:37:30
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form ref="queryFormRef" :inline="true" :model="queryParams">
                    <el-form-item label="类别" prop="supplyType">
                        <el-select v-model="queryParams.supplyType" clearable>
                            <el-option value="1" label="供应商"></el-option>
                            <el-option value="2" label="外协厂"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称查询" prop="companyName">
                        <el-input v-model="queryParams.companyName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="supplierList" :loading="loading">
                <el-table-column label="类别" align="center">
                    <template #default="scope">
                        <span class="not-alert" v-if="scope.row.supplyType == '1'">供应商</span>
                        <span class="not-alert" v-else>外协厂</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="companyName" align="center"></el-table-column>
                <el-table-column label="电话" prop="phone" align="center"></el-table-column>
                <el-table-column label="地址" prop="companyAddress" align="center"></el-table-column>
                <el-table-column label="联系人" prop="contactsName" align="center"></el-table-column>
                <el-table-column label="联系人手机" prop="contactsPhone" align="center"></el-table-column>
                <el-table-column label="联系人微信" prop="contactsWeChat" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="标签" align="center">
                    <template #default="scope">
                        <el-button v-if="scope.row.supplyType == '1'" link type="primary" @click="handleClickCheckLabels(scope.row)">查看关联标签信息</el-button>
                        <el-button v-else link type="primary" @click="handleClickCheckLabels(scope.row)">查看关联工艺</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button link type="primary" :style="{fontSize:'15px'}" @click="handleClickEdit(scope.row)" icon="Edit"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="danger" :style="{fontSize:'15px'}" @click="deleteSupplier(scope.row)"  icon="Delete"></el-button>
                        </el-tooltip>
                        <el-tooltip content="查看详情" placement="top">
                            <el-button link type="success" :style="{fontSize:'15px'}" @click="checkSupplier(scope.row)" icon="Document"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getSupplierList" />
        </el-card>
        <addSupplier :visible="addSupplierVisible" :formModel="form" :typeList="typeList" :settleAccounts="supplier_settle_accounts" @close="handleCloseAdd" @submit="handleSubmit" />
        <editSupplier :visible="editSupplierVisible" :formModel="supplierDetail" :typeList="typeList" :settleAccounts="supplier_settle_accounts" @close="handleCloseEdit" @submit="handleSubmit" />
        <supplierDetails :visible="checkSupplierVisible" :detail="supplierDetail" :settleAccounts="supplier_settle_accounts" @close="handleCloseCheckSupplier" />
        <labelInfo :visible="checkLabelsVisible" :detail="supplierDetail" :labels="labels" @close="handleCloseCheckLabels" />
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { QuerySupplierType, Form, SupplierVO } from '@/api/sj/purchaseManagement/supplierManagement/types';
import { getSupplierListApi, getSupplierDetailApi, deleteSupplierApi,getSupplierLabelApi } from '@/api/sj/purchaseManagement/supplierManagement';
import { getTotalCategoryByMaterialTypeApi } from '@/api/sj/warehouse/typeManagement';
import addSupplier from './component/addSupplier.vue';
import editSupplier from './component/editSupplier.vue';
import supplierDetails from './component/supplierDetails.vue';
import labelInfo from './component/labelInfo.vue';


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { supplier_settle_accounts } = toRefs<any>(proxy?.useDict('supplier_settle_accounts'));

const queryFormRef = ref<FormInstance>();


const data = reactive<pageDataExcludeRuses<Form,QuerySupplierType>>({
    form:{
        companyName: undefined,
        companySimpleName: undefined
    },
    queryParams:{
        pageSize: 30,
        pageNum: 1,
        companyName: undefined,
        supplyType: undefined
    }
});

const { form, queryParams} = toRefs(data);
const supplierList = ref<SupplierVO[]>([]);
const totalData = ref(0);
const loading = ref(false);
const materialType = '2';
const typeList = ref<any[]>([]);
const addSupplierVisible = ref(false);
const supplierDetail = ref<any>({});
const editSupplierVisible = ref(false);
const checkSupplierVisible = ref(false);
const checkLabelsVisible = ref(false);
const labels = ref<string[]>([]);
const checkedSupplierType = ref<string>('1');

const getSupplierList = async () => {
    loading.value = true;
    const {code, rows, total} = await getSupplierListApi(queryParams.value);
    if(code == 200){
        supplierList.value = rows;
        totalData.value = total;
    };
};

/** 根据材料类型获取大类 */
const getTotalTypes = async () => {
    const { data } = await getTotalCategoryByMaterialTypeApi({materialType: materialType});
    typeList.value = data;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getSupplierList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSubmit = (result: boolean) => {
    if(result){
        proxy?.$modal.msgSuccess('成功');
        getSupplierList();
    };
};

const handleClickAdd = () => {
    addSupplierVisible.value = true;
};

const handleCloseAdd = () => {
    addSupplierVisible.value = false;
};

const handleClickEdit = async (row: SupplierVO) => {
    const {code, data} = await getSupplierDetailApi(row.id);
    if(code == 200){
        supplierDetail.value = data;
        editSupplierVisible.value = true;
    };
};

const handleCloseEdit = () => {
    editSupplierVisible.value = false;
};

const deleteSupplier = async (row: SupplierVO) => {
    await proxy?.$modal.confirm("确认将此条信息放入回收站么？");
    const { code } = await deleteSupplierApi(row.id);
    if(code == 200){
        proxy?.$modal.msgSuccess("删除成功！");
        getSupplierList();
    };
};

const checkSupplier = async (row: SupplierVO) => {
    const {code, data} = await getSupplierDetailApi(row.id);
    if(code == 200){
        supplierDetail.value = data;
        checkSupplierVisible.value = true;
    };
};

const handleCloseCheckSupplier = () => {
    checkSupplierVisible.value = false;
};

const handleClickCheckLabels = async (row: SupplierVO) => {
    checkedSupplierType.value = row.supplyType;
    const {code, data} = await getSupplierDetailApi(row.id);
    
    if(code == 200 && row.supplyType == '1' ){
        const result = await getSupplierLabelApi(row.id);
        if(result.code == 200){
            supplierDetail.value = data;
            labels.value = result.data;
            checkLabelsVisible.value = true;
        };
    }else if(code == 200 && row.supplyType == '2'){
        supplierDetail.value = data;
        labels.value = data.factoryIntro;
        checkLabelsVisible.value = true;
    };
};

const handleCloseCheckLabels = () => {
    checkLabelsVisible.value = false;
};

onMounted(()=>{
    getSupplierList();
    getTotalTypes();
});
</script>

<style scoped>

</style>